 const goodsList = [
      {
        id: '4001172',
        name: '人在异乡，胃在故乡',
        price: '289.00',
        picture: './img/meishi/meishi5.jpg',
      },
      {
        id: '4001594',
        name: '没了烟火气，人生其实就是一段孤独的旅程',
        price: '288.00',
        picture: './img/meishi/meishi18.jpg',
      },
      {
        id: '4001009',
        name: '烧烤的江湖，每一刻都有新人涌现，而肉，是永远的主角',
        price: '109.00',
        picture: './img/meishi/meishi19.jpg',
      },
      {
        id: '4001874',
        name: '青春岁月已老，而我们，还在烧烤',
        price: '488.00',
        picture: './img/meishi/meishi20.jpg',
      },
      {
        id: '4001649',
        name: '人们懂得用五味杂陈形容人生，因为懂得味道是每个人心中固守的乡愁',
        price: '139.00',
        picture: './img/meishi/meishi13.jpg',
      },
      {
        id: '3997185',
        name: '吾日三省吾身：早上吃什么，中午吃什么，晚上吃什么',
        price: '108.00',
        picture: './img/meishi/meishi14.jpg',
      },
      {
        id: '3997403',
        name: '饭要和投缘的人吃 日子要和懂你的人过',
        price: '100.00',
        picture: './img/meishi/meishi15.jpg',
      },
      {
        id: '3998274',
        name: '手里提着的饭比男生的手温暖',
        price: '139.00',
        picture: './img/meishi/meishi16.jpg',
      },
    ]
    function render(arr) {
      let str = ''
      arr.forEach(item => {
        const { name, picture, price } = item
        str += `
          <div class="item">
          <img src=${picture} alt="">
          <p class="name">${name}</p>
          <p class="price">${price}</p>
        </div> 
        `
      })
      document.querySelector('.list').innerHTML = str
    }
    render(goodsList)

    document.querySelector('.filter').addEventListener('click', e => {
      const { tagName, dataset } = e.target
      if (tagName === 'A') {
        let arr = goodsList
        if (dataset.index === '1') {
          arr = goodsList.filter(item => item.price > 0 && item.price <= 100)
        } else if (dataset.index === '2') {
          arr = goodsList.filter(item => item.price >= 100 && item.price <= 300)
        } else if (dataset.index === '3') {
          arr = goodsList.filter(item => item.price >= 300)
        }
        render(arr)
      }
    })
	
	const as=document.querySelectorAll('.filter a')
	for(let i=0;i<as.length;i++){
		as[i].addEventListener('click',function(){
		document.querySelector('.filter .sdx').classList.remove('sdx')
		this.classList.add('sdx')
		
		})
	}
	
	
	
	const boxRight =document.querySelector('.delicacy  .boxFourTitleRight')
	const boxFour = document.querySelectorAll('.delicacy .boxFourBody')
	
	boxRight.addEventListener('click',function(e){
		if(e.target.tagName === 'A'){
			boxRight.querySelector('.activeq').classList.remove('activeq')
			
			e.target.classList.add('activeq')
			
			for(let i =0;i<boxFour.length;i++){
				boxFour[i].style.display ='none'
			}
			boxFour[e.target.dataset.id].style.display = 'block'
		}
	})


